<template>
	<view class="shop-cart">
		<!-- 购物车不为空 -->
		<template v-if="shopCartList.length>0">
			<!-- 自定义导航栏 -->
			<UniNavBar title="购物车" :right-text="isNavBar?'完成':'编辑'" fixed statusBar="true"
				@clickRight="isNavBar=!isNavBar">
			</UniNavBar>

			<!-- 商品内容 -->
			<view class="shop-list">
				<view class="shop-item" v-for="(item,index) in shopCartList" :key="index">
					<label class="radio" @click="selectItem(index)">
						<radio value="" color="#49BDFB" :checked="item.checked" /><text></text>
					</label>
					<image :src="item.imgUrl" mode="" class="shop-img"></image>
					<view class="shop-text">
						<view class="shop-name">{{item.name}}</view>
						<view class="shop-color f-color">颜色：{{item.color}}</view>
						<view class="shop-size f-color">尺码：{{item.size}}</view>
						<view class="">{{item.checked}}</view>
						<view class="shop-priceAndNum">
							<view class="">￥{{item.price_new}}</view>
							<!-- 完成时 -->
							<template v-if="!isNavBar">
								<view class="">*{{item.num}}</view>
							</template>
							<!-- 编辑时 -->
							<template v-else>
								<UniNumberBox :value="item.num" @change="changeNum($event,index)"></UniNumberBox>
							</template>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 底部 -->
			<view class="shop-foot">
				<label class="radio" @click="checkAllFn">
					<radio value="" color="#49BDFB" :checked="isCheckAll" /><text>全选</text>
				</label>
				<!-- 完成时 -->
				<template v-if="!isNavBar">
					<view class="foot-total">
						<view class="foot-count">合计：
							<text class="f-active-color">￥{{totalCountAndPrice.price}}</text>
						</view>
						<view class="foot-num" @click="goConfirmOrder">结算({{totalCountAndPrice.count}})</view>
					</view>
				</template>
				<!-- 编辑时 -->
				<template v-else>
					<view class="foot-total">
						<view class="foot-num" style="background-color: black;">移入收藏夹</view>
						<view class="foot-num" @click="delGoodsFn">删除</view>
					</view>
				</template>
			</view>
		</template>
		<!-- 购物车为空 -->
		<template v-else>
			<UniNavBar title="购物车" fixed statusBar="true"></UniNavBar>
			<view class="shop-else-list">
				<text>囧~~~购物车还是空的，赶紧去加购吧！</text>
			</view>
		</template>

	</view>
</template>

<script>
	import uniNavBar from "@/components/uni/uni-nav-bar/uni-nav-bar.vue";
	import {
		mapState,
		mapActions,
		mapGetters,
		mapMutations
	} from "vuex";
	import uniNumberBox from "@/components/uni/uni-number-box/uni-number-box.vue";
	export default {
		components: {
			UniNavBar: uniNavBar,
			UniNumberBox: uniNumberBox
		},
		data() {
			return {
				isNavBar: false,
			}
		},
		onShow() {
		},
		computed: {
			...mapState({
				shopCartList: (state) => state.shopcart.shopCartList,
			}),
			...mapGetters(['isCheckAll', 'totalCountAndPrice']),
		},
		methods: {
			...mapActions(['checkAllFn','delGoodsFn']),
			...mapMutations(['selectItem']),
			changeNum(value,index){
				// console.log(value,index);
				this.shopCartList[index].num = value;
			},
			goConfirmOrder(){
				uni.navigateTo({
					url:'/pages/confirm-order/confirm-order'
				})
			}
		}
	}
</script>

<style scoped>
	.shop-list {
		padding-bottom: 100rpx;
		position: absolute;
		left: 0;
		top: 145rpx;
		right: 0;
		bottom: 0;
		background-color: #f7f7f7;
	}

	.shop-else-list {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: #f7f7f7;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.shop-item {
		display: flex;
		padding: 20rpx;
		align-items: center;
		background-color: #ffffff;
		margin-bottom: 10rpx;
	}

	.shop-img {
		width: 200rpx;
		height: 200rpx;
	}

	.shop-text {
		flex: 1;
		padding-left: 20rpx;
	}

	.shop-color {
		font-size: 24rpx;
	}

	.shop-size {
		font-size: 24rpx;
	}

	.shop-priceAndNum {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.shop-foot {
		border-top: 2rpx solid #f7f7f7;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.radio {
		padding-left: 10rpx;
	}

	.foot-total {
		display: flex;
	}

	.foot-count {
		line-height: 100rpx;
		padding: 0 20rpx;
		font-size: 32rpx;
		/* position: fixed; */
		/* bottom: 10; */
		/* left: 10; */
	}

	.foot-num {
		background-color: #49BDFB;
		color: #ffffff;
		padding: 0 60rpx;
		line-height: 100rpx;
		font-size: 32rpx;
	}
</style>
